<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个 JQuery 程序</title>
    <!-- 第一：下载JQ -->

    <!-- 第二：在页面中，导入 JQ 文件 -->
    <script src="../jquery-3.7.1.js"></script>

    
</head>
<body>
    爱好：
    <input type="checkbox" name="hobby" value="eat"/>吃
    <input type="checkbox" name="hobby" value="drink"/>喝
    <input type="checkbox" name="hobby" value="play"/>玩
    <input type="checkbox" name="hobby" value="happy"/>乐
    <input type="submit" value="提交"/>

    <!-- 第三：使用 JQ -->
    <script>
        $("input[type=submit]").click(function(){
            // cks 是一个什么东东？ - 选中状态的复选框 - 包装集 - 数组 - 对象 - 属性与方法
            var cks = $("input[name=hobby]:checked") ;

            console.log("您的爱好有 " + cks.length + " 个");
            console.log("你的爱好为：")
            for(var i=0;i<cks.length;i++) {
                // var v = $(cks[i]).val() ;
                var v = cks[i].value ;
                console.log(v);
            }
            
        }) ;
        
        
    </script>
</body>
</html>